<template>
  <div class="header">
    <div class="logo">
      <img src="../assets/img/logo.png" alt="">
    </div>
    <ul class="header_nav">
      <li :class="{current:$route.path=='/'}" @click="$router.push('/')">首页</li>
      <li :class="{current:$route.path=='/goods'}" @click="$router.push('/goods')">全部商品</li>
      <li :class="{current:$route.path=='/user'}" @click="$router.push('/user')">个人中心</li>
      <li :class="{current:$route.path=='/order'}" @click="$router.push('/order')">我的订单</li>
      <li :class="{current:$route.path=='/free'}" @click="$router.push('/free')">专属福利</li>
    </ul>
    <div class="search">
      <input type="text" class="ipt" placeholder="搜索全部商品直接回车" v-model="userInputSearch">
      <div class="search_icon" @click="toSearch">
        <img src="../assets/img/search.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInputSearch:"",
    }
  },
  methods:{
    toSearch(){
      this.$router.push(`/goods?keyword=${this.userInputSearch}`)
      this.userInputSearch = ""
    }
  }
}
</script>
 
<style lang = "less" scoped>
.header {
  width: 1200px;
  height: 86px;
  margin: auto;
  background-color: bisque;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header_nav {

    display: flex;
    justify-content: space-between;
    width: 500px;
    height: 16px;
    line-height: 23px;
    li{
      cursor: pointer;
    }
    .current{
      color: #0a328e;
    }
  }

  .search {
    display: flex;
    // justify-content: space-between;

    .ipt {
      width: 214px;
      height: 40px;
      border: 1px solid #DEDEDE;
      border-radius: 20px 0px 0px 20px;
      outline-style:none;
      box-sizing: border-box;
    }

    .search_icon {
      width: 50px;
      height: 40px;
      background: #0A328E;
      border-radius: 0px 20px 20px 0px;
      text-align: center;
      // vertical-align: middle;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>